<template>
  <page-wrap>
    <div class="confirm-container">
      <div class="confirm-container-main">
        <div class="container-main-header">
          <div class="main-header-title">
            <div>桌号：</div>
            <div class="tableNumber">{{ tableNumber }}</div>
          </div>
          <div class="main-header-value">{{ tableType }}</div>
        </div>
        <van-form input-align="right" class="container-main-form">
          <van-cell-group inset :border="false">
            <van-field
              v-model="username"
              name="姓名"
              label="姓名"
              required
              placeholder="请输入姓名"
              @input="formCheck"
            />
            <van-field
              v-model="partySize"
              name="人数"
              label="人数"
              required
              placeholder="人数"
              @input="formCheck"
              type="number"
            />
            <van-field
              v-model="phone"
              name="电话"
              label="电话"
              required
              placeholder="请输入电话"
              @input="formCheck"
              type="number"
            />
            <van-field name="radio" label="性别" required>
              <template #input>
                <van-radio-group
                  v-model="gender"
                  direction="horizontal"
                  style="display: flex"
                  shape="dot"
                >
                  <van-radio name="先生" style="margin-right: 16px"
                    >先生</van-radio
                  >
                  <van-radio name="女士">女士</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field
              v-model="pickWaiter"
              is-link
              readonly
              name="Waiter"
              label="服务员"
              placeholder="请选择"
              @click="showWaiter = true"
            />
            <van-popup v-model:show="showWaiter" position="bottom">
              <div class="custom-content-main" @click="onConfirm1">
                <div
                  class="custom-content-item"
                  v-for="(item, index) in waiterColumns"
                  :key="index"
                >
                  {{ item.text }}
                </div>
                <div class="custom-content-cancle">取消</div>
              </div>
            </van-popup>
            <van-field
              v-model="pickFrom"
              is-link
              readonly
              name="from"
              label="来源"
              placeholder="请选择"
              @click="showFrom = true"
            />
            <van-popup v-model:show="showFrom" position="bottom">
              <div class="custom-content-main" @click="onConfirm2">
                <div
                  class="custom-content-item"
                  v-for="(item, index) in fromColumns"
                  :key="index"
                >
                  {{ item.text }}
                </div>
                <div class="custom-content-cancle">取消</div>
              </div>
            </van-popup>
            <van-field
              v-model="pickBooker"
              is-link
              readonly
              name="booker"
              label="订台人"
              :style="limitation"
              placeholder="请选择"
              @click="openBooker"
            />
            <van-popup v-model:show="showBooker" position="bottom">
              <div class="custom-content-main" @click="onConfirm3">
                <div
                  class="custom-content-item"
                  v-for="(item, index) in bookerColumns"
                  :key="index"
                >
                  {{ item.text }}
                </div>
                <div class="custom-content-cancle">取消</div>
              </div>
            </van-popup>
            <van-field
              v-model="minimumCharge"
              name="低消"
              label="低消"
              placeholder="低消"
            />

            <van-field
              v-model="pickAsk"
              is-link
              readonly
              name="ask"
              label="特殊要求"
              placeholder="请选择"
              @click="showAsk = true"
            />
            <van-popup v-model:show="showAsk" position="bottom">
              <div class="custom-content-main" @click="onConfirm4">
                <div
                  class="custom-content-item"
                  v-for="(item, index) in askColumns"
                  :key="index"
                >
                  {{ item.text }}
                </div>
                <div class="custom-content-cancle">取消</div>
              </div>
            </van-popup>
            <van-field
              v-model="note"
              name="备注"
              label="备注"
              placeholder="请输入备注"
            />
          </van-cell-group>
        </van-form>
      </div>
      <z-button-group>
        <z-button bold @click="onSubmit" top="20" :disabled="isAllValuesPresent"
          >登录</z-button
        >
        <z-button
          bold
          @click="onCancle"
          top="10"
          :plain="true"
          style="margin-bottom: 10px"
          >取消</z-button
        >
      </z-button-group>
    </div>
  </page-wrap>
</template>
<script setup>
import { ref, reactive } from 'vue'
import ls from '@/lib/ls'
import { useRoute, useRouter } from 'vue-router'
import useAppStore from '@/store/app'
import {
  NavBar,
  Form,
  Field,
  DropdownMenu,
  DropdownItem,
  Grid,
  GridItem
} from 'vant'
import { ZButton, ZButtonGroup } from '@/components/Button'
import triangle from '@/assets/svg/confirm/v_confirm-triangle.svg'
const appStore = useAppStore()
const route = useRoute()
const router = useRouter()

// 模拟数据
const tableNumber = ref('A001')
const tableType = ref('大卡')
const username = ref('')
const phone = ref('')
const gender = ref('女士')
const partySize = ref(2)
const waiter = ref('')
const bookingPerson = ref('')
const minimumCharge = ref('1000.00')
const note = ref('')
//--------------------------------------跳转页面传递的数据----------------------------------------

onMounted(() => {
  console.log(route.query)
})

//--------------------------------------表单----------------------------------------
const isAllValuesPresent = ref(true)
const formCheck = () => {
  if (username.value && phone.value && partySize.value) {
    isAllValuesPresent.value = false
  } else {
    isAllValuesPresent.value = true
  }
}
const onSubmit = e => {
  console.log('submit', e)
  // console.log(111);
}
const onCancle = () => {
  window.history.back();
}
// ---------------------------------------选择器-----------------------------------------
// 服务员
const pickWaiter = ref('')
const showWaiter = ref(false)
const waiterColumns = [
  { text: '杭州', value: 'Hangzhou' },
  { text: '宁波', value: 'Ningbo' },
  { text: '温州', value: 'Wenzhou' },
  { text: '绍兴', value: 'Shaoxing' },
  { text: '湖州', value: 'Huzhou' }
]

const onConfirm1 = e => {
  if (e.target.innerHTML !== '取消') {
    pickWaiter.value = e.target.innerHTML
  }
  showWaiter.value = false
}
// 来源
const pickFrom = ref('')
const showFrom = ref(false)
const fromColumns = [
  { text: '营销', value: 'Hangzhou' },
  { text: '宁波', value: 'Ningbo' },
  { text: '温州', value: 'Wenzhou' },
  { text: '绍兴', value: 'Shaoxing' },
  { text: '湖州', value: 'Huzhou' }
]

const onConfirm2 = e => {
  if (e.target.innerHTML !== '取消') {
    pickFrom.value = e.target.innerHTML
  }

  showFrom.value = false
}
// 订台人
const pickBooker = ref('')
const showBooker = ref(false)
const limitation = ref({ opacity: 0.4 })
const bookerColumns = [
  { text: '张三', value: 'Hangzhou' },
  { text: '宁波', value: 'Ningbo' },
  { text: '温州', value: 'Wenzhou' },
  { text: '绍兴', value: 'Shaoxing' },
  { text: '湖州', value: 'Huzhou' }
]
watch(
  () => pickFrom.value,
  (newValue, oldValue) => {
    if (newValue === '营销') {
      limitation.value = {}
    } else {
      limitation.value = { opacity: 0.4 }
      pickBooker.value = ''
    }
  }
)
const openBooker = () => {
  if (pickFrom.value === '营销') {
    showBooker.value = true
  }
}
const onConfirm3 = e => {
  if (e.target.innerHTML !== '取消') {
    pickBooker.value = e.target.innerHTML
  }
  showBooker.value = false
}
// 特殊要求
const pickAsk = ref('')
const showAsk = ref(false)
const askColumns = [
  { text: '杭州', value: 'Hangzhou' },
  { text: '宁波', value: 'Ningbo' },
  { text: '温州', value: 'Wenzhou' },
  { text: '绍兴', value: 'Shaoxing' },
  { text: '湖州', value: 'Huzhou' }
]

const onConfirm4 = e => {
  if (e.target.innerHTML !== '取消') {
    pickAsk.value = e.target.innerHTML
  }

  showAsk.value = false
}
</script>
<style scoped lang="scss">
@import '@/styles/l.scss';
.confirm-container {
  padding: 10px 12px 0px 12px;
  .confirm-container-main {
    background: #28282e;
    border-radius: 8px;
    padding: 0 4px 0 4px;
    .container-main-header {
      display: flex;
      justify-content: space-between;
      font-family: PingFang SC;
      font-weight: bold;
      border-bottom: 1px solid #383840;
      .main-header-title {
        display: flex;
        padding: 22px 0 0 20px;
        font-size: 18px;
        color: #ffffff;
        line-height: 18px;
        .tableNumber {
          color: #ffaa00;
        }
      }
      .main-header-value {
        padding: 6px 6px 6px 5px;
        margin: 18px 20px 18px 0;
        font-size: 13px;
        background: #3c3933;
        border-radius: 4px;
        color: #ffaa00;
        line-height: 13px;
      }
    }
    .custom-content-main {
      .custom-content-item {
        padding: 18px 0 18px 0;
        font-size: 16px;
        color: #fefefe;
        font-family: PingFang SC;
        font-weight: 500;
        text-align: center;
        line-height: 16px;
        border-bottom: 1px solid #505059;
      }
      .custom-content-item:active {
        color: #ffaa00;
      }
      .custom-content-cancle {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
        line-height: 16px;
        text-align: center;
        padding: 18px 0 18px 0;
      }
    }
  }
  
}
</style>
